<template>
  <div class="container-item-list-role">
    <el-table v-loading="listLoading" :data="list" size="mini">
      <el-table-column label="角色名">
        <template slot-scope="{row}">
          <div v-if="row.edit" style="display:flex">
            <el-input v-model="row.role_name" size="mini" />
            <el-button size="mini" style="margin-left:10px" icon="el-icon-refresh" type="warning" @click="cancelEdit(row)">取消</el-button>
          </div>
          <span v-else>{{ row.role_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200">
        <template slot="header">
          <div style="display:flex; justify-content: space-between;padding:0 10px;align-items:center;">
            <span> 操作</span>
            <el-button size="mini" type="success" icon="el-icon-plus" @click="createRole">添加角色</el-button>
          </div>
        </template>
        <template slot-scope="{row}">
          <el-button v-if="row.edit" size="mini" type="primary" icon="el-icon-edit" @click="confirmEdit(row)">确定</el-button>
          <el-button v-else size="mini" type="primary" icon="el-icon-edit" @click="row.edit=!row.edit">编辑</el-button>
          <el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteRole(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
// api
import { getRoleList, editRoleName, createRole, deleteRole } from '@/api/mivawork/role.js';
// item
import craeteRole from './create_role.vue';

export default {
  // components: { craeteRole },
  data() {
    return {
      listLoading: true,
      list: null,
      createForm: {
        role_name: ''
      }
    };
  },
  async mounted() {
    await this.getRoleList();
  },
  methods: {
    async getRoleList() {
      this.listLoading = true;
      const res = await getRoleList();
      const list = res.data.rows || res.data;
      this.list = list.map(v => {
        this.$set(v, 'edit', false);
        v.originalRoleName = v.role_name;
        return v;
      });
      this.listLoading = false;
    },
    cancelEdit(row) {
      row.role_name = row.originalRoleName;
      row.edit = false;
    },
    async confirmEdit(row) {
      if (row.role_name === row.originalRoleName) {
        row.edit = false;
        return;
      }
      const res = await editRoleName({ id: row.id, role_name: row.role_name });
      if (res.code === 200) {
        row.edit = false;
        this.$message({ type: 'success', message: res.message });
        return;
      }
      this.cancelEdit(row);
      this.$message.error(res.message);
    },
    async createRole() {
      const h = this.$createElement;
      this.$msgbox({
        title: '添加新角色',
        message: h(craeteRole, {
          on: {
            getFormData: value => {
              this.createForm = value;
            }
          }
        }),
        showCancelButton: true,
        confirmButtomText: '提交'
      }).then(async() => {
        console.log(this.createForm);
        const res = await createRole(this.createForm);
        await this.getRoleList();
        this.$message({
          type: res.code === 200 ? 'success' : 'error',
          message: res.message
        });
      }).catch(() => {
        console.log('取消了编辑');
      });
    },
    async deleteRole(row) {
      const res = await deleteRole({ id: row.id });
      await this.getRoleList();
      this.$message({
        type: res.code === 200 ? 'success' : 'error',
        message: res.message
      });
    }
  }
};
</script>
